import 'package:rjpb/page/home/profile/controllers/profile_controller.dart';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:jovial_svg/jovial_svg.dart';

class ProfilePage extends StatelessWidget {
  final ProfileController controller = Get.put(ProfileController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 220,
            flexibleSpace: ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
              child: FlexibleSpaceBar(
                background: Stack(
                  children: [
                    // 背景建筑物
                    Positioned.fill(
                      child: ScalableImageWidget.fromSISource(
                        si: ScalableImageSource.fromSvgHttpUrl(Uri.parse(
                            'https://gitee.com/chen-jiahui_000909/svgtu/raw/master/mk9j8ksudye8rnl0_20250409155435A016(3).svg')),
                        fit: BoxFit.cover,
                      ),
                    ),

                    // 渐变覆盖
                    Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Colors.blue.withOpacity(0.8),
                            Colors.teal.withOpacity(0.8),
                          ],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                      ),
                    ),

                    // 头像内容
                    Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Obx(() {
                            final avatar = controller.avatar.value.isNotEmpty
                                ? NetworkImage(controller.avatar.value)
                                : AssetImage('assets/defaultAvatar.png');
                            return Container(
                              padding: EdgeInsets.all(4),
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                gradient: LinearGradient(
                                  colors: [Colors.white, Colors.blue[100]!],
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.2),
                                    blurRadius: 10,
                                    spreadRadius: 2,
                                  )
                                ],
                              ),
                              child: CircleAvatar(
                                radius: 50,
                                backgroundColor: Colors.transparent,
                                backgroundImage: avatar as ImageProvider,
                              ),
                            );
                          }),
                          SizedBox(height: 20),
                          Obx(() => Text(
                                controller.userName.value,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold,
                                  letterSpacing: 1.2,
                                ),
                              )),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                bottom: Radius.circular(30),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: [
                  // 卡片内容
                  Card(
                    elevation: 8,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25),
                    ),
                    margin: EdgeInsets.all(20),
                    child: Padding(
                      padding: EdgeInsets.all(25),
                      child: Column(
                        children: [
                          // 个人信息头部
                          Row(
                            children: [
                              Obx(
                                () => CircleAvatar(
                                  radius: 40,
                                  backgroundImage: controller
                                          .avatar.value.isNotEmpty
                                      ? NetworkImage(controller.avatar.value)
                                      : AssetImage('assets/defaultAvatar.png')
                                          as ImageProvider,
                                ),
                              ),
                              SizedBox(width: 20),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Obx(() => Text(controller.userName.value,
                                        style: TextStyle(
                                            fontSize: 22,
                                            fontWeight: FontWeight.bold))),
                                    SizedBox(height: 5),
                                    // Text('ID: 12345678',
                                    //     style: TextStyle(
                                    //         color: Colors.grey)), // 示例数据
                                  ],
                                ),
                              ),
                              // Chip(
                              //   label: Text('VIP3',
                              //       style: TextStyle(color: Colors.white)),
                              //   backgroundColor: Colors.amber[700],
                              // ),
                              Chip(
                                label: Obx(() => Text(
                                      controller.roleName.value,
                                      style: TextStyle(color: Colors.white),
                                    )),
                                backgroundColor: Colors.amber[700],
                              ),
                            ],
                          ),
                          SizedBox(height: 25),

                          // 数据统计网格
                          GridView.count(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            crossAxisCount: 3,
                            childAspectRatio: 1.5,
                            crossAxisSpacing: 15,
                            mainAxisSpacing: 15,
                            children: [
                              _buildStatItem('手机', controller.phoneNumber.value,
                                  Icons.phone),
                              _buildStatItem(
                                  '性别',
                                  controller.sex.value == '0' ? '男' : '女',
                                  Icons.transgender),
                              _buildStatItem(
                                  '邮箱', controller.email.value, Icons.email),
                              // _buildStatItem('积分', '2580', Icons.star), // 示例数据
                              // _buildStatItem(
                              //     '订单', '36', Icons.shopping_cart), // 示例数据
                              // _buildStatItem(
                              //     '收藏', '18', Icons.favorite), // 示例数据
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),

                  SizedBox(height: 20),

                  // 退出按钮
                  ElevatedButton(
                    onPressed: () => controller.logout(),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.red[400],
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      padding: EdgeInsets.symmetric(vertical: 16),
                      elevation: 3,
                      minimumSize: Size(double.infinity, 50),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.logout, color: Colors.white),
                        SizedBox(width: 10),
                        Text(
                          '退出登录',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: 30),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildInfoItem(IconData icon, String title, String value) {
    return Row(
      children: [
        Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.blue[50],
            shape: BoxShape.circle,
          ),
          child: Icon(icon, color: Colors.blue[800], size: 20),
        ),
        SizedBox(width: 15),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  color: Colors.grey[600],
                  fontSize: 12,
                ),
              ),
              SizedBox(height: 4),
              Text(
                value,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 统计数据项
  Widget _buildStatItem(String title, String value, IconData icon) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        color: Colors.grey[50],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, size: 28, color: Colors.blue[600]),
          SizedBox(height: 8),
          Text(title, style: TextStyle(color: Colors.grey[600])),
          SizedBox(height: 5),
          Text(value,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}
